<template>
  <div class="container">
    <div class="column left">
      <el-button type="primary" @click="handleRemoveDuplicate"
        >开始去重</el-button
      >
    </div>
    <div class="column middle">
      <pre>
        /**
          * 深度去重函数，支持数字、字符串、对象、数组等类型
          * @param {Array} arr - 原始数组
          * @returns {Array} 去重后的新数组
          */
          removeDuplicate(arr) {
            const seen = new Set();

            return arr.filter((item) => {
              const key =
                typeof item === "object" && item !== null
                  ? JSON.stringify(item)
                  : item;
              if (seen.has(key)) {
                return false;
              }
              seen.add(key);
              return true;
            });
          },
      </pre>
    </div>
    <div class="column right">
      <h3>原始数组：</h3>
      <pre>
        [
          1,
          "a",
          [1, 2],
          { name: "Alice", age: 25 },
          [1, 2],
          { name: "Alice", age: 25 },
          "a",
        ]
      </pre>
      <h3>去重结果：</h3>
      <pre>{{ JSON.stringify(uniqueArray, null, 2) }}</pre>
    </div>
  </div>
</template>

<script>
export default {
  name: "ResponsiveLayout",
  data() {
    return {
      uniqueArray: [], // 新增字段
    };
  },
  methods: {
    /**
     * 深度去重函数，支持数字、字符串、对象、数组等类型
     * @param {Array} arr - 原始数组
     * @returns {Array} 去重后的新数组
     */
    removeDuplicate(arr) {
      const seen = new Set();

      return arr.filter((item) => {
        const key =
          typeof item === "object" && item !== null
            ? JSON.stringify(item)
            : item;
        if (seen.has(key)) {
          return false;
        }
        seen.add(key);
        return true;
      });
    },

    handleRemoveDuplicate() {
      const originalArray = [
        1,
        "a",
        [1, 2],
        { name: "Alice", age: 25 },
        [1, 2],
        { name: "Alice", age: 25 },
        "a",
      ];

      this.uniqueArray = this.removeDuplicate(originalArray);
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
  overflow: hidden;
}

.column {
  box-sizing: border-box;
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: left;
  overflow-y: auto;
}

/* 桌面端：三列 */
@media (min-width: 992px) {
  .column.left {
    width: 240px;
  }

  .column.middle {
    flex: 1;
  }

  .column.right {
    width: 300px;
  }
}

/* 平板端：两列 */
@media (min-width: 768px) and (max-width: 991px) {
  .column.left {
    width: 200px;
  }

  .column.middle {
    flex: 1;
  }

  .column.right {
    flex: 0 0 100%;
  }
}

/* 手机端：单列 */
@media (max-width: 767px) {
  .column {
    flex: 0 0 100%;
  }
}
</style>
